import React, { PureComponent } from 'react';
import { cancelOrder } from 'shared/commonFetch';
import classnames from 'classnames';
import Icon from 'shared/components/base/Icon';
import showPresentList from 'shared/components/PresentList';
import { fetchOrderDetailApi } from '../../api';
import './index.less';


const pro1_1 = require('src/static/1-1.png');
const pro1_0 = require('src/static/1.png');
const pro2_1 = require('src/static/2-1.png');
const pro2_0 = require('src/static/2.png');
const pro3_1 = require('src/static/3-1.png');
const pro3_0 = require('src/static/3.png');
const pro4_1 = require('src/static/4-1.png');
const pro4_0 = require('src/static/4.png');
const pro5_1 = require('src/static/5-1.png');
const pro5_0 = require('src/static/5.png');

const preImg = [pro1_1,pro2_1,pro3_1,pro4_1,pro5_1];
const nexImg = [pro1_0,pro2_0,pro3_0,pro4_0,pro5_0];

const dot0 = require('src/static/dot-red.png');
const dot1 = require('src/static/dot-white.png');
const dot2 = require('src/static/dot-ing.png');

// 订单状态
// * 1  贷付款（未支付）  已经生成订单，但是未进行支付

// * 2  已付款（已支付）  生成订单，完成支付

// * 3  待发货 后台客服审核通过后，变成待发货

// * 4  已发货 后台获得物流单号后，为已发货

// * 5  已完成 后台物流状态变为已签收，订单为已完成
// * 6  已取消 在发货前，取消订单成功，为已取消
// * 7  退货中 用户点击退货，并且填写回寄的物流信息
// * 8  退货完成  收到货物，和相关发票，已经完成退款

const ProcessCm = (props)=>{
  const { headTime,name,processName,imgMain,imgLine } = props;
  return(
    <div  className="process-list-item">
      <div className="process-time">{headTime}</div>
      <div className="imgbox">
        <span>{processName}</span>
        <img width="17" height="17" src={imgMain} alt="" />
        {imgLine && <img className="imgline" src={imgLine} alt="" />}
      </div>
      <div className="process-name">{name}</div>
    </div>
  )
}

class CheckDetail extends PureComponent {
  constructor(props){
    super(props);
    this.state = {
      resData:{productlist:[]},
      pros:[
        {name:'提交订单',processName:'等待付款',imgMain:pro1_0,imgLine:dot1},
        {name:'付款成功',processName:'待发货',imgMain:pro2_0,imgLine:dot1},
        {name:'商品出库',processName:'出库成功',imgMain:pro3_0,imgLine:dot1},
        {name:'等待收货',processName:'已签收',imgMain:pro4_0,imgLine:dot1},
        {name:'完成',processName:'',imgMain:pro5_0,imgLine:''}
      ]
    }
  }
  componentWillReceiveProps(props){
    if(props.show){
      fetchOrderDetailApi({order_id:props.id}).then((res)=>{
        if(res.code === 1000){
          const statusId = res.data.order_status_id;
          const { pros } = this.state;
          pros.forEach((item,i)=>{
            const is = i + 1;
            if(is < statusId){
              item.imgMain = preImg[i];
              item.imgLine = is !== 5 && dot0;
              item.processName = '';
              if(statusId == 7){
                pros[4].name = '退货中'
              }else if(statusId == 8){
                pros[4].name = '退货完成'
              }
            }else if(is == statusId){
              item.imgMain = preImg[i];
              item.imgLine = is !== 5 && dot2;
            }else{
              item.imgMain = nexImg[i];
              item.imgLine = is !== 5 && dot1;
              item.processName = '';
            }

            // 已取消订单
            if(statusId == 6){
              if(is < 2){
                item.imgMain = preImg[i];
                item.imgLine = is !== 5 && dot0;
                item.processName = '';
              }else if(is == 2){
                item.imgMain = preImg[i];
                item.imgLine = is !== 5 && dot2;
                item.name = '已取消'
              }else{
                item.imgMain = nexImg[i];
                item.imgLine = is !== 5 && dot1;
                item.processName = '';
              }
            }
          })
          this.setState({resData:res.data,pros})
        }
      })
    }
  }

  cancelOrder(id){
    cancelOrder(id);
  }
  render() {
    const { show,detailHide } = this.props;
    const { resData,pros } = this.state;
    const pro = resData.productlist || [];
    const status = resData.order_status_name;
    const showSty = classnames({
      'animate-slide-down':!show,
      'animate-slide-up':show,
    })
    const hidebox = classnames({
      'check-Detail':true,
      'hide': !show,
    })
    return (
      <div className={hidebox}>
        <div className={showSty}>
          <div className="check-Detail-item">
            <span className="closeX" onClick={detailHide}><Icon type="close" /></span>
            <div className="order-num">订单号：{resData.order_no}</div>
            {
              pro.map((item,i)=>(
                <div className="item-msg" key={i}>
                  <div className="item-msg-imgbox">
                    <img src={item.image} alt="" />
                  </div>
                  <div className="item-msg-content">
                    <p><span>佳能</span>（Canon）{item.title}  </p>
                    {
                      !!item.presentlist.length &&
                      <div className="presentlist">
                        <span>【赠品】{item.presentlist[0].title}</span>
                        {
                          item.presentlist.length > 1 ?
                            <div onClick={()=> showPresentList(item.presentlist)}>显示全部</div>
                            :
                            <div>x1</div>
                        }
                      </div>
                    }

                    <p>{item.quantity}件</p>
                  </div>
                </div>
              ))
            }
            {
              Number(resData.order_status_id) <= 3  ? <div className="cancel-order" onClick={()=>this.cancelOrder(resData.order_id)}>取消订单&gt;&gt;</div> : null
            }

          </div>

          <div className="check-Detail-process">
            <div>
              <h2>商品{status}</h2>
              <div className="process-list">
                {
                  pros.map((item,i)=>(
                    <ProcessCm key={i} name={i === 0 ? `${item.name} ${resData.date_added}` : item.name} processName={item.processName} imgMain={item.imgMain} imgLine={item.imgLine}  />
                  ))
                }


                {/* <ProcessCm name="付款成功" processName="待发货" imgMain={pro2_1} imgLine={dot2}  />
                <ProcessCm name="商品出库" processName="出库成功" imgMain={pro3_0} imgLine={dot1}  />
                <ProcessCm name="等待收货" processName="已签收" imgMain={pro4_0} imgLine={dot1}  />
                <ProcessCm name="完成" imgMain={pro5_0}  /> */}
              </div>
            </div>
          </div>

          <div className="process-msg">
            <h3>收货人信息</h3>
            <div><span>收 货 人： </span><span>{resData.address_fullname}</span></div>
            <div><span>地   址：</span><span>{`${resData.address_province} ${resData.address_city} ${resData.address_county}`}</span></div>
            <div><span>手机号码： </span><span>{resData.address_mobile}</span></div>
          </div>

          <div className="process-msg">
            <h3>配送信息</h3>
            <div><span>配送方式： </span><span>{resData.delivery_company}</span></div>
            <div><span>运费：</span><span>￥{resData.express_money}</span></div>
            {/* <div><span>期望送货日期： </span><span>{resData.delivery_company}</span></div>
            <div><span>期望配送时间： </span><span>{resData.delivery_company}</span></div> */}
          </div>


          <div className="process-msg">
            <h3>付款信息</h3>
            <div><span>付款方式： </span><span>{resData.payment_method_name}</span></div>
            <div><span>{resData.order_status_id == 1 ? '下单' : '付款'}时间：</span><span>{resData.date_added}</span></div>
            <div><span>商品总额： </span><span>￥{resData.total_money}</span></div>
            <div><span>应支付金额： </span><span>￥{resData.total_money}</span></div>
            <div><span>运费金额： </span><span>￥{resData.express_money}</span></div>
          </div>

          <div className="process-msg">
            <h3>发票信息</h3>
            <div><span>发票类型：  </span><span>{resData.invoice_type_name}</span></div>
            <div><span>发票抬头： </span><span>{resData.invoice_title}</span></div>
            <div><span>发票内容： </span><span>{resData.invoice_info}</span></div>
            <div><span>纳税人识别号： </span><span>{resData.invoice_idcode}</span></div>
            <p>电子发票将在订单完成后1-2天内开具</p>
          </div>
        </div>
      </div>
    );
  }
}

export default CheckDetail;
